<template>
	<view :class="[primarySize()]">
		<view class="container flex flex-col">
			
			<view class="flex-grow-1 flex pt30">
				<scroll-view scroll-y="true" class="left_scroll">
					<view class="left_item m-ellipsis" :class="lindex==index?'active':''"
						v-for="(item,index) in jobCategories" @click="bindFirstChange(index)">{{item.category_name}}
					</view>
				</scroll-view>
				<scroll-view scroll-y="true" class="right_scroll">
					<template v-for="(item,index) in jobCategories[lindex].childlist">
						<view class="child_item">{{item.category_name}}</view>
						<view>
							<view class="right_item m-ellipsis" :class="cindex==v.id?'active':''"
								v-for="(v,i) in item.childlist" @click="bindSecondChange(index,v.id,i)">{{v.category_name}}
							</view>
						</view>

					</template>
				</scroll-view>
			</view>
			<view class="bg-white ptb10 plr30" @click="bindConfirm()">
				<view class="btn3">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {

				jobCategories: [],
				lindex: 0,
				rindex: 0,
				cindex: 0,
				dindex:''
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad(options) {

			let page = this;
			let categoryId = options.category_id || 0;
			this.$util.getJobCategories(2, false).then(items => {
				this.jobCategories = items;
				page.jobCategories.forEach(function(item, index) {
					item.childlist.forEach(function(it, ind) {
						if (it.id == categoryId) {
							page.lindex = index;
							page.rindex = ind;
						}
					})
				})
			});
		},
		methods: {
			bindFirstChange(index) {
				this.lindex = index;
			},
			bindSecondChange(index, id,i) {
				this.rindex = index;
				this.cindex = id;
				this.dindex=i;
			},
			bindConfirm() {
				let jobCategory = this.jobCategories[this.lindex].childlist[this.rindex].childlist[this.dindex];
				this.getOpenerEventChannel().emit('jobCategoryTransfer', {
					job: jobCategory
				});
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		min-height: auto;
	}

	.search_nav {
		width: 604rpx;
		height: 75rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 0 30rpx;
	}

	.search_btn {
		line-height: 75rpx;
		color: var(--primary);
		font-size: 28rpx;
	}

	.left_scroll {
		width: 200rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 20rpx 5rpx rgba(183, 189, 202, 0.05);
		border-radius: 0rpx 15rpx 0 0rpx;
		padding-top: 10rpx;
		height: 100%;

		.left_item {
			width: 200rpx;
			height: 110rpx;
			line-height: 110rpx;
			text-align: center;
			color: #555555;
			font-size: 28rpx;
			padding: 0 10rpx;

			&.active {
				color: var(--primary);
				font-weight: bold;
				background: #F4F8FB;
				position: relative;
			}

			&.active:before {
				content: '';
				width: 9rpx;
				height: 110rpx;
				background: var(--primary);
				position: absolute;
				left: 0;
				top: 0;
			}
		}
	}

	.right_scroll {
		height: 100%;

		.child_item {
			color: #101010;
			font-size: 32rpx;
			margin-bottom: 30rpx;
			padding-left: 20rpx;
		}

		.right_item {
			display: inline-block;
			vertical-align: top;
			width: 240rpx;
			height: 74rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 20rpx 5rpx rgba(183, 189, 202, 0.05);
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			margin-left: 20rpx;
			font-size: 28rpx;
			color: #555555;
			line-height: 74rpx;
			text-align: center;
			padding: 0 5rpx;

			&.active {
				background: var(--primary);
				color: #FFFFFF;
				border: 1rpx solid var(--primary);
			}
		}
	}
</style>